<!DOCTYPE html>
<html lang="<%= VUE_APP_LANG %>">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
</head>
<body>
<div id="app">
    <div>
        <img style="width: 100%" :src="bgimg" alt="">
    </div>
    <div>
            <span class="myprize">
                豪礼大放送
                <img class="gomyimg" :src="gomyimg" alt="">
            </span>

    </div>

    <div class="lottery">
        <div class="lottery-item">
            <div class="lottery-start">
                <div class="box gray" v-if="isStart===0">
                    <p>活动未开始</p>
                </div>
                <div class="box" @click="startLottery" v-if="isStart===1">
                    <!--点击抽奖-->
                </div>
                <div class="box gray" v-if="isStart===2">
                    <p>活动已过期</p>
                </div>
                <div class="box gray" v-if="isStart===3">
                    <p>已抽奖</p>
                </div>
            </div>
            <ul>
                <li v-for="(item,i) in list" :class="i==index?'on':''">
                    <div class="box" :class="{active: i==index}">
            <!--            <p class="box-active-k" v-if="i==index">
                            <img :src="activelist[index].files" alt="">
                        </p> -->
                        <p >
                            <img :src="item.files" alt="">
                            <p class="box-title">{{ item.title }}</p>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="desc-div winnerlist">
        <div class="nnk-home-desc-box" style="height: 45vw;line-height: 10vw;overflow: hidden">
            <div style="position: relative;bottom: 2vw;">
                <img style="width: 36vw" :src="titleimg" alt="">
            </div>

            <div>
                <vue-seamless-scroll :data="winninglist" class="seamless-warp" :class-option="classOption">
                    <ul>
                        <li style="text-align: center;margin-left: 1vw" class="DataList_top "
                            v-for="(item,index) in winninglist" :key="index" v-if="index < 101">
                            {{item.text}} 
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>

        </div>
    </div>


    <!-- 中奖弹窗 -->
    <div class="mask" v-if="showToast" @click="closetoast"></div>
    <div class="lottery-alert" v-if="regret == 1">
        <img style="width: 52vw;height: 13vw;position: relative;bottom: 8vw;" :src="yhimg" alt="">
        <div style="position: relative;top: -9vw;">
            <div class="lottery-alerth1" style="margin-bottom: 4vw;margin-top: 3vw;">您未中奖</div>

            <div class="btnsave regret" @click="closetoast">确定</div>
        </div>

    </div>
    <div class="lottery-alert" v-if="feeshow == 1">
        <img style="width: 52vw;height: 13vw;position: relative;bottom: 8vw;" :src="gximg" alt="">
        <div style="position: relative;top: -9vw;">
            <div class="lottery-alerth1" style="margin-bottom: 4vw;margin-top: 3vw;">获得{{list[index].title}}</div>

            <div class="btnsave regret" @click="closetoast">确定</div>
        </div>

    </div>
    <div class="lottery-alert" v-if="videoshow == 1">
        <img style="width: 52vw;height: 13vw;position: relative;bottom: 8vw;" :src="gximg" alt="">
        <div style="position: relative;top: -9vw;">
            <div class="lottery-alerth1" style="margin-bottom: 4vw;margin-top: 3vw;">
                获得
                {{list[index].title}}
                <br>
            </div>
            <div class="btnsave regret" @click="closetoast">确定</div>

        </div>


        <div class="errodiv" v-show="toastShow">
            {{toastText}}
        </div>
    </div>


</div>

</body>
</html>
<script src="./js/uni.webview.1.5.4.js"></script>
<script src="http://yx.xing-rang.com/static/js/jquery-2.1.4.js"></script>
<script src="./js/vue@2.7.16.js"></script>
<script src="./js/vue-seamless-scroll.min.js"></script>
<script>
    /**
     * 向宿主页面发送消息
     */
    const uniPostMessageEvent = function(action, data = {}){
        // uni.postMessage({
        //     data: {
        //         action,
        //         params: data
        //     }
        // })
        if(window.onUniH5Event){
            window.onUniH5Event(action, data)
        }
    }
    // H5需要使用监听message的方式通信
    window.addEventListener('message', function (e) {  // 监听 message 事件
        // console.log(e)
        let { data, source } = e
        // 参数
        let { params } = data
        // 事件
        switch(data.action){
            case 'loadHtml':
                vm.$data.baseUrl = params.baseUrl
                vm.$data.imgPath = params.imgPath
                vm.$data.userToken = params.userToken
                vm.$data.pwd = params.pwd
                vm.$data.list = params.list
            break
            // 获取抽中索引
            case 'onDrawIndex':
                vm.onDrawIndex(params)
            break
            // 获取抽中索引
            case 'onWinningList':
                vm.onWinningList(params)
            break
        }
    });
    
    // 等待初始化完毕
    document.addEventListener('UniAppJSBridgeReady', () => {
        uniPostMessageEvent('onJSBridgeReady')
        document.body.onclick = () => uniPostMessageEvent('onClick')
    })
    
    /**
     * 简单请求
     * @param {Object} api
     * @param {Object} data
     */
    // function request(api, data){
    //     return new Promise((reslove, reject) => {
            
    //         data['token'] = vm.$data.token
    //         data['pwd'] = vm.$data.pwd
            
    //         $.ajax({
    //           url: vm.$data.baseUrl + api,
    //           // 目前后端只有post请求
    //           type: 'POST',
    //           data,
    //           dataType: 'json',
    //           success: function(response) {
    //             console.log('Response:', response);
                    
    //             // if (res.data.code == 900 || res.data.status == 'success'){
    //             // 	reslove(res.data, res);
    //             // }
    //             // else if (res.data.code == 300){
    //             // 	toUserLogin();
    //             // 	reject(res.data);
    //             // }
    //             // else if (res.data.code == 301){
    //             // 	reject(res.data.msg || '参数错误');
    //             // }
    //             // else {
    //             // 	reject(res.data.msg || '系统错误');
    //             // }
    //           },
    //           error: function(xhr, status, error) {
    //             console.error('Error:', error);
    //           }
    //         });
    //     })
    // }
    
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                baseUrl: '',
                imgUrl: '',
                userToken: '',
                pwd: '',
                
                regret: 0,
                feeshow: 0,
                videoshow: 0,
                tipshow: 0,
                isStart:1,
                inputNum: '',
                postion: 0,
                videotype: 0,
                showToast: 0, //显示中奖弹窗
                tipword1: "",
                tipword2: "",
                toastShow: false,
                toastText: "",
                list: [
                    // {
                    //     img: ('../assets/img/wyy1.png'),
                    //     title: '网易云音乐会员月卡'
                    // },
                    // {
                    //     img: ('../assets/img/5yfee1.png'),
                    //     title: '5元话费券'
                    // },
                    // {
                    //     img: ('../assets/img/txsp1.png'),
                    //     title: '腾讯视频会员月卡'
                    // },
                    // {
                    //     img: ('../assets/img/qq1.png'),
                    //     title: 'QQ音乐会员月卡'
                    // },
                    // {
                    //     img: ('../assets/img/15fee1.png'),
                    //     title: '15元话费券'
                    // },
                    // {
                    //     img: ('../assets/img/aqy1.png'),
                    //     title: '爱奇艺视频会员月卡'
                    // },
                    // {
                    //     img: ('../assets/img/try1.png'),
                    //     title: '继续努力'
                    // },
                    // {
                    //     img: ('../assets/img/10fee1.png'),
                    //     title: '10元话费券'
                    // }
                ], //奖品1-9
                activelist: [
                    // {
                    //     img: ('../assets/img/wyy2.png'),
                    // },
                    // {
                    //     img: ('../assets/img/5yfee2.png'),
                    // },
                    // {
                    //     img: ('../assets/img/txsp2.png'),

                    // },
                    // {
                    //     img: ('../assets/img/qq2.png'),

                    // },
                    // {
                    //     img: ('../assets/img/15fee2.png'),

                    // },
                    // {
                    //     img: ('../assets/img/aqy2.png'),

                    // },
                    // {
                    //     img: ('../assets/img/try2.png'),
                    // },
                    // {
                    //     img: ('../assets/img/10fee2.png'),
                    // }
                ], //奖品1-9
                index: -1, // 当前转动到哪个位置，起点位置
                count: 8, // 总共有多少个位置
                timer: 0, // 每次转动定时器
                speed: 200, // 初始转动速度
                times: 0, // 转动次数
                cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize: -1, // 中奖位置
                click: false,//标识是否处于抽奖状态
                bgimg: "",
                gomyimg: ('../assets/img/gomy.png'),
                titleimg: ('../assets/img/titleimg.png'),
                ruleimg:  ('../assets/img/ruleimg.png'),
                gximg:  ('../assets/img/gx.png'),
                yhimg:  ('../assets/img/yh.png'),
                // 中奖名单
                winninglist: [
                    // {desc: '恭喜', phone: "******", descword: "手机用户抽中10元话费券"},
                    // {desc: '恭喜', phone: "******", descword: "手机用户抽中15元话费券"},
                    // {desc: '恭喜', phone: "******", descword: "手机用户抽中爱奇艺视频会员"},
                    // {desc: '恭喜', phone: "******", descword: "手机用户抽中QQ音乐会员"},

                ],
            }
        },
        components: {},
        computed: {
            classOption() {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000,// 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        mounted() {
        },
        methods: {
            //抽奖方法
            startLottery() {
                if( this.click == true){
                    return
                }
                
                uniPostMessageEvent('getDrawIndex')
            },
            // 获取到抽中id，开始转动
            onDrawIndex({ id }){
                let index = this.list.findIndex(item => item.id == id)
                this.click = true
                this.startRoll(index)
            },
            // 中奖名单
            onWinningList({ list }){
                this.winninglist = list
            },
            // 抽奖结束
            completion(){
                
            },
            // 开始转动
            startRoll(index) {
                // const index = parseInt(Math.random() * 10, 0) || 0; // 随机获得一个中奖位置
                
                this.times += 1 // 转动次数
                this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化
                // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
                if (this.times > this.cycle + 10 && this.prize === this.index) {
                    clearTimeout(this.timer) // 清除转动定时器，停止转动
                    this.prize = -1
                    this.times = 0
                    this.speed = 200
                    var that = this;
                    setTimeout(res => {
                        this.click = false;
                        that.showToast = true;
                        //未中奖
                        if (this.index == 6) {
                            this.regret = 1;
                        }
                        //话费
                        if ([1, 4, 7].includes(parseInt(this.index))) {
                            this.feeshow = 1;
                        }
                        //视频会员
                        if ([0, 2, 3, 5].includes(parseInt(this.index))) {
                            this.videoshow = 1;
                        }
                    }, 500)
                } else {
                    if (this.times < this.cycle) {
                        this.speed -= 10 // 加快转动速度
                    } else if (this.times === this.cycle) {
                        // 抽奖结束
                        this.prize = index; //中奖位置,可由后台返回
                        if (this.prize > 7) {
                            this.prize = 7
                        }
                        this.completion()
                    } else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index +
                        1)) {
                        this.speed += 110
                    } else {
                        this.speed += 20
                    }
                    if (this.speed < 40) {
                        this.speed = 40
                    }
                    this.timer = setTimeout(this.startRoll, this.speed, index)
                }
            },

            // 每一次转动
            oneRoll() {
                let index = this.index // 当前转动到哪个位置
                const count = this.count // 总共有多少个位置
                index += 1
                if (index > count - 1) {
                    index = 0
                }
                this.index = index
            },
            closetoast() {
                this.regret = 0,
                    this.feeshow = 0,
                    this.videoshow = 0,
                    this.showToast = 0,
                    this.tipshow = 0
            },


            toast(e) {
                var that = this;
                that.toastText = e
                that.toastShow = true
                setTimeout(function () {
                    that.toastShow = false
                }, 1500)

            },


        }
    })
</script>
<style scoped lang="scss">
    
    
    
    
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #666;
        background-color: #e72427;
    }

    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    body {
        color: #666;
        background-color: #e72427;
    }

    img {
        border: 0px;
    }

    ul,
    li {
        list-style-type: none;
    }

    .lottery-box {
        overflow: hidden;
    }

    .lottery-box .title {
        text-align: center;
        padding: 50px 0;
        font-size: 18px;
        color: #fff;
    }

    .lottery {
        animation: changeBg .5s ease infinite;
        overflow: hidden;
        padding: 20px;
        /*width:100%;*/
        margin: 0 auto;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 13vw 5vw 6vw 5vw;
    }

    @keyframes changeBg {
        0% {
            background-image: url("../assets/img/boxbg.png");
        }

        100% {
            background-image: url("../assets/img/boxbg.png");
        }
    }

    .lottery .lottery-item {
        height: 90vw;
        position: relative;
        margin-top: 3vw;
        margin-left: 3.5vw;
    }

    .lottery .lottery-item ul li {
        width: 33.33333333%;
        position: absolute;
        padding-right: 1vw;
        box-sizing: border-box;
    }

    .lottery .lottery-item ul li:nth-child(2) {
        left: 33.33333333%;
    }

    .lottery .lottery-item ul li:nth-child(3) {
        left: 66.66666666%;
    }

    .lottery .lottery-item ul li:nth-child(4) {
        left: 66.66666666%;
        top: 29vw;
    }

    .lottery .lottery-item ul li:nth-child(5) {
        left: 66.66666666%;
        top: 58vw;
    }

    .lottery .lottery-item ul li:nth-child(6) {
        left: 33.33333333%;
        top: 58vw;
    }

    .lottery .lottery-item ul li:nth-child(7) {
        left: 0;
        top: 58vw;
    }

    .lottery .lottery-item ul li:nth-child(8) {
        left: 0;
        top: 29vw;
    }

    .lottery .lottery-item ul li .box {
        height: 25vw;
        width: 25vw;
        background-color: #FFFFFF;
        border-radius: 2vw;
        position: relative;
        text-align: center;
        /*overflow: hidden;*/
        /*background: url("../assets/img/pointer.png") no-repeat center;*/
        background-size: 100% 100%;
    }
    
    .lottery .lottery-item ul li .box.active{
         background-color: #FFD14D;
    }

    .lottery .lottery-item ul li .box img {
        display: block;
        height: 12vw;
        width: 12vw;
        border-radius: 6vw;
        margin: 0 auto;
        margin-top: 3.5vw;
        margin-bottom: 0.5vw;
    }
    
    

    .lottery .lottery-item ul li .box p {
        color: #708ABF;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }
    
    .lottery .lottery-item ul li .box .box-title{
     
        color: #E7272A;
        white-space:  pre-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
    
        font-size: 2.8vw;
        margin-top: 1vw;
        height: 7vw; /* 通过设置最大高度来限制显示两行文字 */
          
    }

    .lottery .lottery-item ul li.on .box {
        /*background: url("../assets/img/5yfee2.png") no-repeat center;*/
        background-size: 100% 100%;
    }

    .lottery .lottery-item ul li.on .box p {
        color: #fff;
    }

    .lottery .lottery-item .lottery-start {
        position: absolute;
        left: 32%;
        width: 33.33333333%;
        top: 30vw;
        padding-right: 3vw;
        padding-left: 2vw;
    }

    .lottery .lottery-item .lottery-start .box {
        height: 25vw;
        color: #fff;
        cursor: pointer;
        text-align: center;
        overflow: hidden;
        background: url("../assets/img/draw.png") no-repeat center;
        background-size: 100% 100%;
    }

    .lottery .lottery-item .lottery-start .box p b {
        font-size: 40px;
        margin-top: 16px;
        margin-bottom: 10.5vw;
        line-height: 30px;
        display: block;
    }

    .lottery .lottery-item .lottery-start .box:active {
        opacity: 0.7;
    }

    .lottery .lottery-item .lottery-start .box.gray {
        background: url("../assets/img/draw.png") no-repeat center;
        background-size: 100% 100%;
    }

    .lottery .lottery-item .lottery-start .box.gray p {
        color: #708ABF;
        font-weight: bold;
    }

    .mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        overflow: hidden;
        z-index: 222;
        top: 0;
        left: 0;
    }

    .lottery-alert {
        max-width: 100%;
        text-align: center;
        z-index: 10000;
        background: #fff;
        padding: 1vw 4vw 0vw 4vw;
        position: fixed;
        left: 11vw;
        right: 11vw;
        margin: auto;
        top: 50%;
        transform: translateY(-50%);
        border: 2vw solid #ffe69d;
        border-radius: 4vw;
    }


    .lottery-tip .btnsave {
        width: 64vw;
        height: 10vw;
        background-color: #ffd53d;
        -moz-border-radius: 5vw;
        border-radius: 5vw;
        line-height: 10vw;
        color: #fff;
        margin-bottom: 10vw;
        margin-left: 3vw;
        font-size: 5vw;
    }


    .lottery-alerth1 {
        font-size: 18px;
        font-weight: normal;
        color: #000;
        position: relative;
    }

    .lottery-alert img {
        display: block;
        height: 120px;
        margin: 0 auto;
    }


    .lottery-alert p {
        color: #666;
        font-size: 16px;
        padding-top: 0.5vw;
    }

    .lottery-alert .btnsave {
        width: 64vw;
        height: 10vw;
        background-color: #ffd53d;
        border-radius: 5vw;
        line-height: 10vw;
        color: #fff;
    }

    .regret {
        position: relative;
        top: 5vw;
    }

    .myprize {
        background-image: linear-gradient(
                0deg, #ffdd62 0%, #ffe68c 100%);
        border-radius: 5vw;
        padding: 2vw 17vw;
        color: #e72427;
        font-size: 5vw;
    }

    .gomyimg {
        position: relative;
        top: 1vw;
        width: 3vw;
        height: 5vw;
    }

    .desc-div {
        background-color: #fff;
        border-radius: 2vw;
        padding: 3vw;
    }

    .winnerlist {
        margin: 5vw 5vw 0 5vw;
        text-align: center;
        height: 51vw;
        overflow: hidden;
    }

    .seamless-warp {
        width: 100%;
        height: calc(100% - 16px);
        overflow: hidden;

    }

    .nnk-home-desc-box {
        padding: 5vw;
        -moz-border-radius: 3vw;
        background-color: #fefcfa;
        border-radius: 3vw;
        color: #666;
        font-size: 3vw;
        line-height: 6vw;
    }


    .errodiv {
        position: fixed;
        top: 56%;
        opacity: 0.6;
        background: #000;
        color: #fff;
        width: 90%;
        height: 11vw;
        line-height: 10vw;
        border-radius: 2vw;
    }
    
    
    
</style>